
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Sidebar</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link
        href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
        rel="stylesheet"
      >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="sidebar-top">
              <a href="#" class="logo__wrapper">
                <img src="assets/logo.png" alt="Logo" class="logo">
                <img src="assets/logo-small.png" alt="Logo" class="logo-small">
              </a>
            </div>
            <div class="sidebar-links">
                <ul>
                  <li>
                    <a href="#home" title="Home" class="tooltip">
                      <!-- svg icon -->
                      <span class="link hide">Home</span>
                      <span class="tooltip__content">Home</span>
                    </a>
                  </li>
                  <!-- more links -->
                </ul>
              </div>
              <div class="sidebar-bottom hide">
                <img src="assets/diamond.png" alt="Diamond">
                <p>
                  Welcome to Laplace Diamond club!
                </p>
                <button>
                  Explore Benefits
                </button>
              </div>
              <div class="expand-btn">
                <img
                  src="assets/right-collapse.svg"
                  alt="Left Collapse"
                >
                <span class="hide">
                  Collapse
                </span>
              </div>
          </nav>
          <script src="script.js"></script>
    </body>
</html>